<template>
  <li>
    <router-link :to="path"
      ><i class="mdi mdi-circle"></i>{{ name }}
      <i v-if='hasSub' class="feather icon-chevron-right pull-right"></i>
    </router-link>
    <ul class="vertical-submenu" v-if='hasSub' >
      <slot></slot>
    </ul>
  </li>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    path: { type: String, required: true },
    name: { type: String },
    hasSub: {type: Boolean, default: false}
  },
};
</script>

<style>
</style>